<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>航班详情 - ${flight.flightId}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #3498db;  /* 主蓝色 */
            --accent-color: #2980b9;     /* 深蓝色 */
            --success-color: #3498db;    /* 统一为蓝色 */
        }

        body {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            min-height: 100vh;
        }

        .flight-card {
            background: #ffffff;
            border-radius: 20px;
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
            max-width: 1000px;  /* 加宽容器 */
            margin: 2rem auto;
            overflow: hidden;
            position: relative;
        }

        .configurator {
            padding: 2rem;
            background: #f8f9fa;
            border-radius: 15px;
            margin: 1.5rem 0;
        }

        .seat-selector {
            display: grid;
            grid-template-columns: repeat(3, 1fr);  /* 三列布局 */
            gap: 1.5rem;
            margin-top: 1.5rem;
        }

        .price-display {
            font-size: 2rem;  /* 缩小字体 */
            font-weight: 700;
            color: var(--secondary-color);  /* 蓝色 */
            text-align: center;
            margin: 1.5rem 0;  /* 减少边距 */
            padding: 1rem;
            background: rgba(52, 152, 219, 0.1);  /* 浅蓝背景 */
            border-radius: 12px;
        }

        .btn-purchase {
            background: var(--secondary-color);  /* 蓝色 */
            color: white;
            padding: 1rem 2rem;  /* 减小按钮尺寸 */
            border-radius: 12px;
            font-weight: 700;
            transition: all 0.3s ease;
            width: 100%;
            border: none;
        }

        .btn-purchase:hover {
            background: var(--accent-color);  /* 深蓝悬停 */
            transform: scale(1.02);
            box-shadow: 0 8px 20px rgba(52, 152, 219, 0.3);  /* 蓝色阴影 */
        }

        /* 紧凑布局调整 */
        .flight-header {
            padding: 1.2rem 1.5rem;
        }
        .configurator {
            padding: 1.5rem;
        }
        .card-body {
            padding: 1.2rem;
        }
        .price-display {
            font-size: 2rem;
            color: #3498db; /* 改为蓝色 */
            background: rgba(52, 152, 219, 0.1); /* 浅蓝背景 */
            /* 其他样式保持不变 */
        }

        .class-option {
            background: white;
            border: 2px solid #e9ecef;
            border-radius: 12px;
            padding: 1.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }

        .class-option:hover {
            transform: translateY(-3px);
            border-color: var(--secondary-color);
        }

        .class-option.active {
            border-color: var(--success-color);
            background: rgba(39, 174, 96, 0.05);
        }


    </style>
</head>
<body>
    <div class="container py-4">  <!-- 减少上下内边距 -->
        <div class="flight-card">
            <div class="flight-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h2 class="mb-0" style="font-size: 1.8rem;">${flight.flightId}</h2>
                    <div class="badge bg-light text-dark">✈️ ${flight.aircraftId}</div>
                </div>
            </div>

            <div class="p-3">  <!-- 减少内边距 -->
                <div class="row g-3 mb-3">  <!-- 紧凑布局 -->
                    <div class="col-md-6">
                        <div class="card h-100 border-0 shadow-sm">
                            <div class="card-body">
                                <h5 class="card-title text-primary mb-2">🛫 出发信息</h5>
                                <div class="h4 mb-1">${flight.origin}</div>
                                <div class="text-muted small">
                                    ${fn:replace(fn:substring(flight.departureTime.toString(), 0, 16), 'T', ' ')}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card h-100 border-0 shadow-sm">
                            <div class="card-body">
                                <h5 class="card-title text-danger mb-2">🛬 到达信息</h5>
                                <div class="h4 mb-1">${flight.destination}</div>
                                <div class="text-muted small">
                                    ${fn:replace(fn:substring(flight.arrivalTime.toString(), 0, 16), 'T', ' ')}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="configurator">
                    <div class="mb-3">
                        <label class="form-label">选择舱位类型</label>
                        <div class="seat-selector">
                            <div class="class-option" data-class="economy">
                                <h5>经济舱</h5>
                                <div class="text-success">${flight.price} 元</div>
                                <small class="text-muted">基础价格</small>
                            </div>
                            <div class="class-option" data-class="business">
                                <h5>商务舱</h5>
                                <div class="text-success">${flight.price * 1.5} 元</div>
                                <small class="text-muted">1.5倍价格</small>
                            </div>
                            <div class="class-option" data-class="first">
                                <h5>头等舱</h5>
                                <div class="text-success">${flight.price * 3} 元</div>
                                <small class="text-muted">3倍价格</small>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">座位偏好</label>
                        <select class="form-select" id="seatPosition">
                            <option value="window">靠窗座位</option>
                            <option value="aisle">过道座位</option>
                            <option value="front">前排座位</option>
                            <option value="emergency">应急出口座位</option>    
                        </select>
                    </div>

                    <!-- 紧凑价格显示 -->
                    <div class="price-display">
                        <div class="text-muted small">最终价格</div>
                        <div id="finalPrice">${flight.price} 元</div>
                    </div>

                    <form action="PurchaseServlet" method="post">
                        <!-- 隐藏字段 -->
                        <input type="hidden" name="flightId" value="${flight.flightId}">
                        <input type="hidden" name="classType" id="selectedClass" value="economy">
                        <input type="hidden" name="finalPrice" id="finalPriceValue" value="${flight.price}">
                        <input type="hidden" name="seatPosition" id="selectedPosition" value="window">
                        <button type="submit" class="btn-purchase">
                            立即购票 →
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 舱位选择交互
        document.querySelectorAll('.class-option').forEach(option => {
            option.addEventListener('click', function() {
                // 移除所有激活状态
                document.querySelectorAll('.class-option').forEach(item => {
                    item.classList.remove('active');
                });
                
                // 添加激活状态
                this.classList.add('active');
                
                // 更新隐藏字段和价格显示
                const classType = this.dataset.class;
                document.getElementById('selectedClass').value = classType;
                
                // 计算最终价格（核心逻辑）
                const basePrice = ${flight.price}; // 从JSP获取基础价格
                let multiplier = 1;
                if(classType === 'business') multiplier = 1.5;
                if(classType === 'first') multiplier = 3;
                
                const finalPrice = basePrice * multiplier;
                // 更新显示
                document.getElementById('finalPrice').textContent = finalPrice.toFixed(0) + ' 元';
                // 更新隐藏字段
                document.getElementById('finalPriceValue').value = finalPrice.toFixed(0);
            });
        });

        // 位置选择更新
        document.getElementById('seatPosition').addEventListener('change', function() {
            document.getElementById('selectedPosition').value = this.value;
        });

        // 默认选择经济舱
        document.querySelector('[data-class="economy"]').click();
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script></body>
</html>